<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title th:text="${course['courseName']}+' - 课程详情 - '+${infoMap['title']}"></title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <input type="hidden" id="playId" value="0"/>
    <!--当前播放节点的资源类型-->
    <input type="hidden" id="materialTypeKey"/>
    <input type="hidden" id="price" th:value="${course['realPrice']}"/>
    <input type="hidden" id="buyCourse" th:value="${course['courseBuyStatus']['buy']}"/>
    <input type="hidden" id="playCourseId" th:value="${course['lastCoursePlayRecord']}==null ? 0 : ${course['lastCoursePlayRecord']['courseId']}"/>
    <input type="hidden" id="playCatalogId" th:value="${course['lastCoursePlayRecord']}==null ? 0 : ${course['lastCoursePlayRecord']['catalogId']}"/>
    <input type="hidden" id="classesUrl" th:value="${classesUrl}"/>
    <!--<input hidden id="isWeiXin" value="${isWeiXin}"/>-->
    <div class="content wm-content ovf" id="course-content">
        <section class="course-play__wrap">
            <video id="courseVideoPlayer" class="hide" width="100%" height="100%" webkit-playsinline="true" x5-playsinline="" playsinline="true" preload="true" x-webkit-airplay="allow" autobufer="true" autoplay="true" isrotate="false" autoHide="true" controls="controls"></video>
            <div th:style="'background-image: url('+(!${#maps.isEmpty(course['imageMap'])} and !${#maps.isEmpty(course['imageMap']['mobileUrlMap'])} and !${#strings.isEmpty(course['imageMap']['mobileUrlMap']['large'])} ?${course['imageMap']['mobileUrlMap']['large']}:'')+')'" class="course-play-bg"></div>
            <div class="cp-shadow" id="course-play-box">
                <section class="cp-return">
                    <a class="goBack" th:href="${backUrl}">
                        <span class="iconfont icon-fanhui" style="color:#fff;"></span>
                    </a>
                    <span class="button button-link cInfoShare-btn button-nav pull-right mt5">
                        <i class="icon iconfont icon-liwu vam"></i><span class="vam">邀请好友</span>
                    </span>
                </section>
            </div>
            <aside class="course-play-btn"></aside>
        </section>
        <article>
            <div class="wm-buttons-tab__wrap">
                <div class="buttons-tab wm-buttons-tab" id="buttons-tab">
                    <a href="#tab1" class="tab-link button active" id="detail">详情</a>
                    <a href="#tab2" class="tab-link button" id="table">目录</a>
                    <a href="#tab3" class="tab-link button" id="comments">评价</a>
                    <a href="#tab4" class="tab-link button" id="interact">互动</a>
                </div>
            </div>
            <div class="content course-cont__wrap ovf">
                <div class="tabs">
                    <div id="tab1" class="tab content tab-gray-bg active">
                        <div class="content-padded">
                            <div class="wm-whiteBox mt5" style="padding: 0;" th:if="!${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['memberBut']} and ${selaSwitch}==3">
                                <a th:href="@{/mobile/uc/member/queryAllMemberList}">
                                    <ul class="list-block member-block-wrap">
                                        <li class="item-content item-link">
                                            <div class="item-media ml5"><i class="icon iconfont icon-zuanshi fs7"></i></div>
                                            <div class="item-inner">
                                                <div class="item-title">
                                                    <span class="fs7">
                                                        开通会员，购课可享会员价：
                                                        <span th:if="${course['courseBuyStatus']['memberPriceBut']}" th:text="'￥'+${course['memberPrice']}"></span>
                                                        <span th:if="${course['courseBuyStatus']['memberFreePriceBut']}">免费</span>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </a>
                            </div>
                            <div class="wm-whiteBox mt5">
                                <div class="mt5">
                                    <span class="c-333" id="courseName" th:text="${course['courseName']}"></span>
                                    <input type="hidden" id="courseId" th:value="${course['id']}" />
                                    <input type="hidden" id="lookNum" th:value="${course['courseProfile']['buyCount']}+${course['initBuyNum']}" />
                                </div>
                                <input type="hidden" id="course-summary" th:value="${course['summary']}" />
                                <div class="mt5 fs4">
                                    <span class="c-888">讲师：</span>
                                    <span class="c-333">
                                        <th:block th:each="teacher : ${course['teacherList']}" th:text="${teacher['teacherName']} +' '"></th:block>
                                        <th:block th:if="${course['teacherList']}==null" th:text="'暂无讲师'"></th:block>
                                    </span>
                                </div>
                                <div class="mt5 fs4" th:if="${course['validType']}==1">
                                    <span class="c-888">有效期：</span>
                                    <span class="c-333">自购买之日起 </span>
                                    <span class="c-red" th:text="${course['validDay']}">0</span>
                                    <span class="c-333"> 天内</span>
                                </div>
                                <div class="mt5 fs4" th:if="${course['validType']}==2">
                                    <span class="c-888">有效期：</span>
                                    <span class="c-333">自购买之日起 到</span>
                                    <span class="c-red" th:text="${#dates.format(course.validTime,'yyyy-MM-dd')}">0</span>
                                    <span class="c-333">前可反复学习，</span>
                                    <div>
                                        <span th:text="${#dates.format(course.dontBuyTime,'yyyy-MM-dd')}" class="c-red"></span>
                                        <span class="c-333">前可自由报名</span>
                                    </div>
                                </div>
                                <div class="mt5 fs4">
                                    <span class="c-888">更新至：</span>
                                    <span class="c-333" th:if="${course['contextStatus']} == 1" id="last-update">暂无更新</span>
                                    <span class="c-333" th:if="${course['contextStatus']} == 2">本课已全部完结</span>
                                </div>
                                <div class="mt5">
                                    <div class="row">
                                        <div class="col-auto course-teacher-show">
                                            <ol class="face-group__wrap pl5">
                                                <li th:if="!${#lists.isEmpty(course['teacherList'])}" th:each="teacher,index : ${course['teacherList']}">
                                                    <img th:if="${index['index']} < 3" th:attrappend="data-src=${teacher['imageMap']['mobileUrlMap']['large']}" th:src="@{{path}/front/mobile/v3/img/default/error-pic.jpg?v={v}(path=${staticPath},v=${v})}" width="24" height="24" th:alt="${teacher['teacherName']}">
                                                </li>
                                            </ol>
                                        </div>
                                        <div class="col-auto">
                                            <section class="pl5 mt5">
                                            <span class="c-666 fs4">

                                                <samp>共有</samp>
                                                <samp th:if="${course['courseProfile']['buyCount']} >= 10000" th:text="${#numbers.formatDecimal(course['courseProfile']['buyCount']/10000D,1,1,'POINT')}+'万人在学此课程'"></samp>
                                                <samp th:if="${course['courseProfile']['buyCount']} < 10000" th:text="${course['courseProfile']['buyCount']}+'人在学此课程'"></samp>
                                            </span>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="wm-whiteBox mt5">
                                <div class="row no-gutter">
                                    <div class="col-20 text-center">
                                        <span class="button button-tip-bx button-tip-warning-bx" style="opacity: .8;">服务</span>
                                    </div>
                                    <div class="col-80">
                                        <span class="fs6" th:text="${course['courseService']}">随堂练习·随堂资料·作业批改·免费答疑</span>
                                    </div>
                                </div>
                            </div>
                            <div class="wm-whiteBox mt5">
                                <div class="row no-gutter">
                                    <div class="col-20 text-center">
                                        <span class="button button-tip-bx button-tip-warning-bx">活动</span>
                                    </div>
                                    <div class="col-80" id="activity-context-box">
                                        <section>
                                            <span class="fs6">暂无活动</span>
                                        </section>
                                    </div>
                                </div>
                                <hr class="coupon-box">
                                <div class="row no-gutter pb5 coupon-box">
                                    <div class="col-20 text-center">
                                        <span class="button button-tip-bx button-tip-danger-bx">优惠</span>
                                    </div>
                                    <div class="col-60">
                                        <span class="c-red icon iconfont icon-youhuiquan fs8"></span>
                                        <span class="fs6 vam">点击进入领取优惠券</span>
                                    </div>
                                    <div class="col-20 text-right">
                                        <a href="javascript:;" class="selectOpcardBtn c-888 fs6">
                                            <span class="vam">领券</span>
                                            <span class="vam icon icon-right fs4"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="wm-whiteBox mt5">
                                <section class="mb5"><span class="fs6 c-333">简介</span></section>
                                <section class="wm-article-cont__wrap">
                                    <div id="details" th:utext="${course['details']}"></div>
                                </section>
                            </div>
                        </div>
                    </div>
                    <div id="tab2" class="tab content">
                        <div class="course-menu-tree__wrap">
                            <div class="lecture-list__wrap">
                                <div th:if="${course['courseTypeKey']}=='PACKAGE' and ${#lists.size(course['packageCourseList'])} > 0" class="card-footer course-group-changeBar">
                                    <input type="hidden" id="pc-index-box" value="0"/>
                                    <ul id="course-package-list" style="display: none;">
                                        <!--未购买，或者购买后未激活的-->
                                        <li th:attrappend="data-name=${packageCourse['course']} == null ? '': ${packageCourse['course']['courseName']},data-id=${packageCourse['courseId']}" th:each="packageCourse : ${course['packageCourseList']}" th:if="${course['courseBuyStatus']['buy']}==false or (${course['courseBuyStatus']['buy']}==true and ${course['courseBuyStatus']['record']['status']}==0)"></li>
                                        <!--已购买，且已激活的-->
                                        <li th:attrappend="data-name=${packageCourse['course']['courseName']},data-id=${packageCourse['courseId']}" th:each="packageCourse : ${course['courseBuyStatus']['buy']}==true ? ${course['courseBuyStatus']['record']['courseBuyPackageCourseList']} : null" th:if="${course['courseBuyStatus']['buy']}==true and ${course['courseBuyStatus']['record']['status']}==1"></li>
                                    </ul>
                                    <a href="javascript:void(0)" class="select-course-box" data-type="1">
                                        <span class="icon icon-left vam"></span> 上一课
                                    </a>
                                    <span class="fs7 c-666" id="current-course-name"></span>
                                    <a href="javascript:void(0)" class="select-course-box" data-type="2">下一课
                                        <span class="icon icon-right vam"></span>
                                    </a>
                                </div>
                                <div class="list-block no-mt">
                                    <ul class="list-container history-lecture-list" id="course-catalog-list"></ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab3" class="tab content">
                        <div class="page-group">
                            <div id="page-infinite-scroll-bottom" class="page page-current course-comment__wrap">
                                <div class="content infinite-scroll native-scroll" data-type='native' data-distance="100">
                                    <div class="wm-title__wrap card-header mt5">
                                        <span class="fs8 c-333" id="course-comment-count">全部评价(0)</span>
                                    </div>
                                    <article class="">
                                        <div class="list-block no-mt">
                                            <ul class="list-container wm-question-list__wrap facebook-card" id="course-comment-list"></ul>
                                        </div>
                                    </article>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="tab4" class="tab content">
                        <div class="content-padded">
                            <section class="re-class" style="display: none;">
                                <div class="hLh30">
                                    <span class="fs8 c-333">关联班级</span>
                                </div>
                                             <div class="course-class__wrap mt5">
                                    <ul class="course-class-item-box clearfix">

                                    </ul>
                                </div>
                            </section>
                            <section class="wm-line  re-class" style="display: none;"></section>
                            <section class="list-block exam-in-item-list__wrap">
                                <ul>
                                    <li class="item-content item-link">
                                        <a  id="qa-teacher-btn2" data-type="0">
                                            <div class="item-media">
                                                <span class="exam-in-item-icon course-in-item-icon-1">&nbsp;</span>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title">
                                                    <span class="wm-title-txt"><span class="fs8">向当前问答专家免费提问</span></span>
                                                    <section class="wm-desc-wrap">
                                                        <span class="fs4 c-999">已报名可免费向相关讲师提相关任何专业性问题</span>
                                                    </section>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                  <!--  <li class="item-content item-link">
                                        <a href="javascript:void(0)" id="">
                                            <div class="item-media">
                                                <span class="exam-in-item-icon course-in-item-icon-2">&nbsp;</span>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title">
                                                    <span class="wm-title-txt"><span class="fs8">互动测评</span> <small class="fs4 c-red">（提交结果有奖励哦！）</small></span>
                                                    <section class="wm-desc-wrap">
                                                        <span class="fs4 c-999">此课程设置了在线趣味互动测试题，快去试试，看看你的测试结果吧</span>
                                                    </section>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="item-content item-link">
                                        <a href="javascript:void(0)" id="">
                                            <div class="item-media">
                                                <span class="exam-in-item-icon course-in-item-icon-3">&nbsp;</span>
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-title">
                                                    <span class="wm-title-txt"><span class="fs8">表单问卷</span></span>
                                                    <section class="wm-desc-wrap">
                                                        <span class="fs4 c-999">您有一份表单问卷，请查收。提交问卷可获得积分奖励</span>
                                                    </section>
                                                </div>
                                            </div>
                                        </a>
                                    </li>-->
                                </ul>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>

    <nav class="bar bar-tab course-info-bar-tab">
        <!--未购买或未免费报名时显示在线咨询和立即报名-->
        <a class="tab-item external active" th:href="${serviceMap['type']}==2?'tel:'+${serviceMap['context']}:'javascript:void(0);'"  th:classappend="(${serviceMap['type']}==1 or ${serviceMap['type']}==null  or ${serviceMap['type']}=='')?'online-consultation':''" th:attrappend="data-course=${serviceMap['context']}" href="javascript:void(0);" style="display: table-cell !important;">
            <span class="icon icon-phone vam" style="font-size: 0.92rem;"></span>
            <span class="tab-label vam">在线咨询</span>
        </a>
        <th:block th:if="!(${course['status']}==2  or ${course['status']}==3 or ${course['status']}==5)">
            <a th:if="${course['courseBuyStatus']['buyBut']}" class="tab-item external cInfo-price-bx" id="c-sign-up-btn">
                <span class="fs4">￥</span>
                <span th:text="${course['realPrice']}"></span>
                <span class="fs7"> 立即报名</span>
            </a>
            <!--如果是会员课程且用户已购买会员，或者是免费课程的，可以免费报名开通-->
            <a th:if="!${course['courseBuyStatus']['buy']} and ${course['courseBuyStatus']['freeBuyBut']}" th:attr="data-paytype=${course['courseBuyStatus']['payType']}" class="tab-item external cInfo-price-bx free-bm-box" href="javascript:void(0)">
                <span class="fs14"> 免费报名</span>
            </a>
            <a th:if="!${course['courseBuyStatus']['buyBut']} and ${course['courseBuyStatus']['memberBut']}" class="tab-item external cInfo-price-bx" th:href="@{/mobile/uc/member/queryAllMemberList}">
                <i class="icon iconfont icon-zuanshi" style="font-size: .8rem;line-height: 0;"></i>
                <div style="display: inline-block;text-align: left;">
                    <span style="font-size: .8rem">会员课程</span>
                    <p class="fs6" style="margin: 0;color: #FED6D6;">立即开通学习</p>
                </div>
            </a>
            <!--如果是套餐课程，并且已购买，但是未激活的，则需要激活套餐课程-->
            <a th:if="${course['courseTypeKey']}=='PACKAGE' and ${course['courseBuyStatus']['buy']} == true and ${course['courseBuyStatus']['record']['status']}==0" class="tab-item external active" th:href="@{/mobile/uc/course/initActivationPackage?courseId={courseId}&recordId={recordId}(courseId=${course['id']},recordId=${course['courseBuyStatus']['record']['id']})}">
                <span class="icon iconfont icon-bianji" style="font-size: 0.85rem;"></span>
                <span class="tab-label">激活套餐</span>
            </a>
        </th:block>
        <th:block th:if="(${course['status']}==2   or ${course['status']}==3) and !${course['courseBuyStatus']['buy']}">
            <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}" id="abandoned">
                <span th:text="'课程以下架'" class="fs7"></span>
            </a>
        </th:block>
        <th:block th:if="${course['status']}==5   and !${course['courseBuyStatus']['buy']} ">
            <a class="tab-item external cInfo-price-bx"  th:attrappend="data-type=${course['status']},data-buytype=${course['courseBuyStatus']['buy']}">
                <span class="fs7">课程已停售</span>
            </a>
        </th:block>
        <a class="tab-item external active" style="display: none;" id="c-share-btn"  href="javascript:void(0);">
            <span class="icon iconfont icon-fenxiang"></span>
            <span class="tab-label">分享</span>
        </a>
        <a class="tab-item external active" style="display: none;" id="qa-teacher-btn">
            <span class="icon iconfont icon-huati1" style="font-size: 1.06rem;"></span>
            <span class="tab-label" >向讲师提问</span>
        </a>
        <a class="tab-item external active" style="display: none;"  data-eval="只能评论正在学习的课程" id="c-comment-btn" href="javascript:void(0);">
            <span class="icon iconfont icon-taolun"></span>
            <span class="tab-label">反馈评分</span>
        </a>
    </nav>

    <div class="popup popup-about feedbackPopup">
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup" id="course-comment-close">
                <span class="iconfont icon-guanbi ml5"></span>
            </button>
            <button class="button button-link button-nav pull-right" id="course-submit-feedback">
                <span class="mr5">提交</span>
            </button>
            <h1 class="title">反馈评分课程</h1>
        </header>
        <div class="content">
            <div class="content-padded feedbackPopup-bx pl5 pr5">
                <section class="mt5 pt5">
                    <header class="card-header">
                        <span class="c-333">课程质量</span>
                        <small class="c-bbb fs4">你觉得课程播放时是否足够流畅清晰，体验顺畅</small>
                    </header>
                    <div class="zp-range__wrap">
                        <input id="quality" type="hidden" class="zp-range-single-slider" value="50"/>
                    </div>
                </section>
                <section class="mt5 pl5 pr5 pt5">
                    <header class="card-header">
                        <span class="c-333">老师讲法</span>
                        <small class="c-bbb fs4">你觉得老师讲是否做到重点突出，简直明了</small>
                    </header>
                    <div class="zp-range__wrap">
                        <input id="teach" type="hidden" class="zp-range-single-slider" value="50"/>
                    </div>
                </section>
                <section class="mt5 pl5 pr5 pt5">
                    <header class="card-header">
                        <span class="c-333">综合感受</span>
                        <small class="c-bbb fs4">我对这节课的综合感受</small>
                    </header>
                    <div class="zp-range__wrap">
                        <input id="feel" type="hidden" class="zp-range-single-slider" value="50"/>
                    </div>
                </section>
                <section class="mt5 pl5 pr5 pt5">
                    <header class="card-header">
                        <span class="c-333">偶尔吐槽</span>
                        <small class="c-bbb fs4">我还有其它话要说，别拦我</small>
                    </header>
                    <div class="mt5">
                        <textarea id="comment" class="feedback-txtarea" placeholder="别憋着，说两句~~~"></textarea>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <textarea id="c-classTest-ele" class="hide">
        <div class="text-center pr pt5 pb5">
            <aside class="c-classTest-icon"><span>&nbsp;</span></aside>
            <h3 class="pt5" style="margin-bottom: 0;font-weight: 200;">即将进入随堂练习</h3>
            <span class="fs7 c-bbb">本次练习共</span>
            <span class="fs7 c-blue" id="question-count">0</span>
            <span class="fs7 c-bbb">题</span>
        </div>
    </textarea>
    <!-- 浏览文章 -->
    <div class="popup popup-about course-article-read-popup">
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup" id="course-article-close">
                <span class="iconfont icon-guanbi ml5"></span></button>
            <h1 class="title">阅读文章</h1>
        </header>

        <div class="content">
            <div class="content-padded pt5 pb5 pl5 pr5" id="course-article-container"></div>
        </div>
    </div>
    <!-- 浏览直播 -->
    <div class="popup popup-about course-live-read-popup">
        <header class="bar bar-nav">
            <button class="button button-link button-nav pull-left close-popup" id="course-live-close">
                <span class="iconfont icon-guanbi ml5"></span></button>
            <h1 class="title">直播室</h1>
        </header>

        <div class="content">
            <div style="height: 100%" id="course-live-container">

            </div>
        </div>
    </div>
    <div data-th-replace="layout/footer"></div>
    <script th:if="${vlasType}=='POLYV'" src="http://player.polyv.net/script/player.js"></script>
    <script th:src="@{{path}/front/mobile/business/order/goods/gen-free-order.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/mobile/business/course/course-info.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/mobile/business/course/play/exercises/common-exercises.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/mobile/business/course/play/course-play.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/mobile/business/course/play/load-html.min.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/mobile/business/course/comment/course-comment.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/mobile/business/course/course-info-coupon.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script th:inline="javascript" type="text/javascript">
        var courseTypeKey = [[${course['courseTypeKey']}]];
        var shareKey=[[${shareKey}]];
        var courseId = [[${course['id']}]];
        var packageCourseId = [[${packageCourseId}]];
        var playCourseId = [[${packageCourseId}]];
        var playCatalogId =0;
        var initPlayCatalogId = [[${catalogId}]];
        var contextStatus = [[${course['contextStatus']}]];
    </script>
</body>
</html>